/*
 * 职员创建
 * @Author: yudong
 * @Date: 2018-04-03 11:00:51
 * @Last Modified by: ljb
 * @Last Modified time: 2018-08-09 17:52:17
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-customer-staff-create {
		min-height: 74vh;
		.staff-from {
			width: 380px;
		}
    }

</style>
<template>
	<div class="v-customer-staff-create">
		<Row
			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:label-width="labelWidth()"
					:rules="ruleValidate"
					name="create__form"
					class="staff-from">

					<Form-item
						:label="$t('staff.name')"
						prop="name">
						<i-input
							v-model="formValidate.name"
							:placeholder="$t('staff.please_enter_name')"
							name="create__name"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('staff.account')"
						prop="account">
						<i-input
							v-model="formValidate.account"
							:placeholder="$t('staff.please_enter_account')"
							name="create__account"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('staff.password')"
						prop="password">
						<i-input
							v-if="!show_password"
							v-model="formValidate.password"
							:placeholder="$t('staff.please_enter_password')"
							type="password"
							name="create__password"
							icon="eye"
							@on-click="showPassword()"/>
						<i-input
							v-else
							v-model="formValidate.password"
							:placeholder="$t('staff.please_enter_password')"
							type="text"
							name="create__password"
							icon="eye"
							@on-click="showPassword()"/>
					</Form-item>

					<Form-item
						:label="$t('staff.email')"
						prop="email">
						<AutoComplete
							v-model="formValidate.email"
							:placeholder="$t('staff.please_enter_email')"
							name="create__email"
							@on-search="handleSearch">
							<Option
								v-for="item in email_suffixs"
								:value="item"
								:key="item">{{ item }}</Option>
						</AutoComplete>
					</Form-item>

					<Form-item
						:label="$t('staff.phone')"
						prop="phone">
						<i-input
							v-model="formValidate.phone"
							:placeholder="$t('staff.please_enter_phone')"
							name="create__phone"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('staff.gander')"
						prop="sex">
						<RadioGroup v-model="formValidate.sex">
							<Radio
								label="1">
								<span>{{ $t('staff.male') }}</span>
							</Radio>
							<Radio
								label="2">
								<span>{{ $t('staff.female') }}</span>
							</Radio>
						</RadioGroup>
					</Form-item>

					<Form-item
						:label="$t('staff.role')"
						prop="role_name">
						<Select
							v-model="formValidate.role_name"
							:placeholder="$t('staff.please_select_role')"
							name="create__role_name"
							clearable>
							<Option
								v-for="( staff , key ) in staffRoles"
								:value="staff.name"
								:key="key">{{ staff.name }}</Option>
						</Select>
					</Form-item>

					<Form-item>
						<Button
							name="create__submit"
							type="primary"
							@click="handleSubmit('formValidate')">
							{{ $t('staff.submit') }}
						</Button>
						<Button
							type="ghost"
							style="margin-left: 8px"
							name="create__reset"
							@click="handleReset('formValidate')">
							{{ $t('staff.reset') }}
						</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>

import { validatePhone } from 'src/validate';
import labelWidthMixin from 'src/views/mixins/labelWidthMixin';

export default {
	name: 'StaffCreate',
	mixins: [labelWidthMixin],
	props: {
		staffRoles: {
			type: Array,
			default() {
				return [];
			},
		},
	},

	data() {
		return {

			email_suffixs: [], // 自动补全email后缀

			formValidate: {
				name: '', // 职员名称

				account: '', // 账户

				password: '', // 密码

				email: '', // 邮箱

				phone: '', // 手机

				sex: '1', // 性别

				role_name: '', // 职员身份
			}, // 新建职员时的表单

			show_password: false,

			ruleValidate: { // 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('staff.name') }),
						trigger: 'blur,change',
					},
				],
				account: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('staff.account') }),
						trigger: 'blur,change',
					},
				],
				password: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('staff.password') }),
						trigger: 'blur,change',
					},
					{
						type: 'string',
						min: 6,
						message: this.$t('validate.min', { field: this.$t('staff.password'), length: 6 }),
						trigger: 'blur,change',
					},
				],
				email: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('staff.email') }), // '邮箱不能为空',
						trigger: 'blur,change',
					},
					{
						type: 'email',
						message: this.$t('validate.email', { field: this.$t('staff.email') }), // '邮箱格式不合法',
						trigger: 'blur,change',
					},
				],
				phone: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('staff.phone') }), // ''电话不能为空',
						trigger: 'blur,change',
					},
					{
						validator: validatePhone,
						trigger: 'blur,change',
					},
				],
				sex: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('staff.gander') }), //  '性别不能为空',
						trigger: 'blur,change',
					},
				],
				role_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('staff.role') }), //  '职员角色不能为空',
						trigger: 'blur,change',
					},
				],
			},
		};
	},
	methods: {

		/**
         * 拼接自动补全的数据
         * @param  {string} value {输入的数据}
         * @return {undefined}
         */
		handleSearch(value) {
			this.email_suffixs = !value || value.indexOf('@') >= 0 ? [] : [
				`${value}@qq.com`,
				`${value}@sina.com`,
				`${value}@163.com`,
				`${value}@163.net`,
				`${value}@gmail.com`,
				`${value}@yahoo.com`,
				`${value}@msn.com`,
				`${value}@hotmail.com`,
				`${value}@aol.com`,
				`${value}@ask.com`,
				`${value}@live.com`,
			];
		},

		/**
         * 账号密码显示与隐藏
         * @return {undefined}
         */
		showPassword() {
			this.show_password = !this.show_password;
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.dataPost();
					this.show_password = false;
				} else {
					this.$Message.error(this.$t('staff.invalid_form_data'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
		},

		/**
         * 手动拼接数据
         * @return {undefined}
         */
		dataPost() {
			const form_data = {
				name: this.formValidate.name,

				account: this.formValidate.account,

				password: this.formValidate.password,

				email: this.formValidate.email,

				phone: this.formValidate.phone,

				sex: this.formValidate.sex,

				role_name: this.formValidate.role_name,
			};

			this.$emit('post', form_data);
		},

	},
};
</script>
